function useWindowSize() {
  const [size, setSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  React.useEffect(() => {
    const updateSize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    window.addEventListener("resize", updateSize);

    return () => {
      window.removeEventListener("resize", updateSize);
    };
  }, []);

  return size;
}
const initParams = (params) => {
  const Sizes = [
    { id: "iPhone", name: "iPhone 6/7/8", width: 370, height: 667 },
    { id: "iPhone Plus", name: "iPhone Plus", width: 414, height: 736 },
    { id: "Android", name: "Android", width: 360, height: 780 },
    { id: 'iPad Air', name: 'iPad Air', width: 820, height: 1180 },
    { id: "iPad Plus", name: "iPad Plus", width: 1024, height: 1366 },
  ];
  const Scales = [50, 75, 100, 125, 150, 200].map((item) => ({
    id: item,
    name: `${item}%`,
    scale: `${item / 100}`,
  }));
  const Vertical = "vertical";
  const Horizontal = "horizontal";
  const sizeTarget = Sizes[0];
  const scaleTarget = Scales[2];
  const { id, width, height } = sizeTarget;
  return {
    // 常量
    Sizes,
    Scales,
    Vertical,
    Horizontal,
    // 变量
    sizeTarget,
    isVertical: true,
    direction: Vertical,
    curSize: { width, height },
    scaleTarget,
    ...params,
  };
};
const dataReducer = (state, action) => {
  const { type, key, value } = action;
  switch (type) {
    case "size": {
      const [item] = state.Sizes.filter((i) => i.id === value);
      const { id, width, height } = item;
      state.sizeTarget = item;
      state.curSize = { width, height };
      state.direction = state.Vertical;
      state.isVertical = true;
      return { ...state };
    }
    case "direction": {
      const { width, height } = state.curSize;
      if (state.direction === state.Vertical) {
        state.direction = state.Horizontal;
        state.isVertical = false;
      } else {
        state.direction = state.Vertical;
        state.isVertical = true;
      }
      state.curSize = { width: height, height: width };
      return { ...state };
    }
    case "scale": {
      const [item] = state.Scales.filter((i) => i.id.toString() === value);
      state.scaleTarget = item;
      return { ...state };
    }
  }
};
const Previewer = () => {
  const iframeRef = React.useRef();
  const { width, height } = useWindowSize();
  const [dataParams, dispatch] = React.useReducer(
    dataReducer,
    {},
    initParams.bind(this)
  );
  const {
    Sizes,
    Scales,
    isVertical,
    sizeTarget,
    curSize,
    scaleTarget
  } = dataParams;
  const onSizeChange = (e) => {
    const { value } = e.target;
    dispatch({ type: "size", value });
  };
  const onDirectionChange = () => dispatch({ type: "direction" });
  const onScaleChange = (e) =>
    dispatch({ type: "scale", value: e.target.value });

  const translateY = React.useMemo(() => {
    const containerHeight = height - 32
    if (containerHeight > 0 && scaleTarget.scale * curSize.height > containerHeight) {
      return (scaleTarget.scale * curSize.height - containerHeight) / 2 / scaleTarget.scale;
    } else {
      return 0;
    }
  }, [height, curSize.height, scaleTarget.scale])
  const translateX = React.useMemo(() => {
    const containerWidth = width
    if (containerWidth > 0 && scaleTarget.scale * curSize.width > containerWidth) {
      return (scaleTarget.scale * curSize.width - containerWidth) / 2 / scaleTarget.scale;
    } else {
      return 0;
    }
  }, [width, curSize.width, scaleTarget.scale])
  return (
    <div
      className="flex flex-col items-center justify-center w-full h-full cursor-default"
      style={{ background: "#e0e8f6" }}
    >
      <div
        className="flex items-center justify-center w-full h-[32px] border-b border-solid box-border"
        style={{ borderColor: "#f1f4f9" }}
      >
        <div className="ml-[20px]">尺寸：</div>
        <select
          className="rounded-[4px] cursor-pointer px-[10px] mr-[20px]"
          value={sizeTarget.id}
          onChange={onSizeChange}
        >
          {Sizes.map((item, key) => (
            <option key={key} value={item.id}>
              {item.name}
            </option>
          ))}
        </select>
        <div className="mx-[20px]">
          <span>{curSize.width}</span>
          <span className="mx-[10px]">x</span>
          <span>{curSize.height}</span>
        </div>
        <div className="mx-[20px]">
          <select
            className="rounded-[4px] cursor-pointer px-[10px] mr-[20px]"
            value={scaleTarget.id}
            onChange={onScaleChange}
          >
            {Scales.map((item, key) => (
              <option key={key} value={item.id}>
                {item.name}
              </option>
            ))}
          </select>
        </div>
        <div className="ml-[20px]">
          <div
            className="w-[16px] h-[24px] bg-slate-400 cursor-pointer"
            style={{
              transform: `rotate(${isVertical ? "0deg" : "90deg"})`,
            }}
            title={`切换${isVertical ? "横屏" : "竖屏"}`}
            onClick={onDirectionChange}
          ></div>
        </div>
      </div>
      <div className="relative flex1 w-full h-full flex items-center justify-center overflow-auto">
        {/* <div className="absolute left-0 top-0 w-full h-full flex items-center justify-center">
          <div
            style={{
              width: curSize.width,
              height: curSize.height,
              background: "pink",
            }}
          ></div>
        </div> */}
        <div
          style={{
            width: curSize.width,
            height: curSize.height,
            background: "#FFF",
            transform: `scale(${scaleTarget.scale}) translateX(${translateX}px) translateY(${translateY}px)`,
          }}
        >
          <iframe
            ref={iframeRef}
            src="http://127.0.0.1:5500/iframe-demo/index.html?userAgent=app"
            style={{
              width: "100%",
              height: "100%",
            }}
            frameBorder="0"
          />
        </div>
      </div>
    </div>
  );
};
